$(function () {
  var layer = layui.layer;
  var form = layui.form;
  //1.定义时间美化器  美化发布时间  然后在html模板引擎中 |dataFormat 调用
  template.defaults.imports.dataFormat = function (date) {
    const dt = new Date(date); //获取现在的日期
    var year = dt.getFullYear(); //获取年份
    var mouth = padZero(dt.getMonth() + 1); //获取月份要+1
    var date = padZero(dt.getDate()); //获取日

    var hh = padZero(dt.getHours()); //获取小时
    var mm = padZero(dt.getMinutes()); //获取分钟
    var ss = padZero(dt.getSeconds()); //获取秒数

    return year + "-" + mouth + "-" + date + "-" + hh + "-" + mm + "-" + ss;
  };
  // 1.1定义一个补零函数
  function padZero(n) {
    return n > 9 ? n : "0" + n;
  }

  // 2.
  // 定义一个查询的参数对象，将来请求数据的时候，
  // 需要将请求参数对象提交到服务器
  // 因为需要传参
  var q = {
    pagenum: 1, //页码值,默认请求第一页的数据
    pagesize: 5, //每页显示多少条数据,默认显示两条
    cate_id: "", //文章分类的ID
    state: "", //文章的状态，可选值有：已发布、草稿
  };

  initTable(); //3.3 调用创建获取文章列表数据的函数
  initCate(); //4.2 调用 初始文章分类的方法

  // 3.创建获取文章列表数据的函数方法
  function initTable() {
    $.ajax({
      url: "/my/article/list",
      data: q,
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        // console.log(res
        //3.1获取列表数据成功
        //3.2利用模板引擎渲染页面
        var strHtml = template("tpl-table", res);
        $("tbody").html(strHtml);

        // 6.1  调用渲染分页的方法  页面文章渲染完之后就一个渲染分页
        //需要接收一下总数据条数 就是有几条数据 传给渲染分页 来算需要渲染多少页
        // 获取文章列表数据 中的 res  里面的total属性  对应的值就是总数据条数
        renderPage(res.total);
      },
    });
  }

  // 4. 初始文章分类的方法  就是获取文章分类  筛选部分
  function initCate() {
    $.ajax({
      url: "/my/article/cates",
      success: function (res) {
        // console.log(res);
        if (res.status !== 0) return layer.msg(res.message);
        var strHtml = template("tpl-cate", res);
        $("[name = cate_id]").html(strHtml);

        // 4.1 通过 layui 重新渲染表单区域的UI结构!!!!!!!!!!!!
        form.render();
      },
    });
  }

  // 5.实现筛选功能   监听筛选的submit 提交事件
  //还需要 分别拿到分类的值  跟发布状态的值   写到q对象对应的值
  $("#form-screen").on("submit", function (e) {
    e.preventDefault();
    // 5.1 拿到 选择分类和发布状态的值    通过属性选择器 因为有name属性
    var cate_id = $("[name=cate_id]").val(); //分类的值
    var state = $("[name =state]").val(); //发布状态的值

    // 5.2为 q中对应的属性赋值    就是把值替换为新的
    q.cate_id = cate_id;
    q.state = state;
    // 5.3根据最新的筛选条件 重新渲染数据
    // 调用创建获取文章列表数据的函数
    initTable();
  });

  // 6.定义渲染分页的方法  就是页码
  //需要接收一下总数据条数 就是有几条数据 传给渲染分页 来算需要渲染多少页
  // 获取文章列表数据 中的 res  里面的total属性  对应的值就是总数据条数

  //总数据条数 除以 每一页显示几条数据  =  多少页
  function renderPage(total) {
    // console.log(total); //这个就是总数据条数;

    // 6.1  调用 laypage.render() 方法来渲染分页的结构
    // 基础参数选项  参考layui分页部分
    // 通过核心方法：laypage.render(options) 来设置基础参数。由于使用非常简单，本篇直接罗列核心接口的参数选项
    layui.laypage.render({
      // 指向存放分页的容器，值可以是容器ID、DOM对象。如：
      // 1. elem: 'id' 注意：这里不能加 # 号
      // 2. elem: document.getElementById('id')
      // 值是 String/Object
      elem: "page-box",

      // 数据总数。一般通过服务端得到   Number
      count: total,

      curr: q.pagenum, // 设置默认被选中的分页

      limit: q.pagesize, //每页显示的条数 laypage将会借助 count 和 limit 计算出分页数。

      layout: ["count", "limit", "prev", "page", "next", "skip"],
      //自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）
      // Array  数组

      limits: [5, 10, 15, 20], //每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框 Array数组

      jump: function (obj, first) {
        //6.2 jump - 切换分页的回调
        //    当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
        console.log(first); //第一次值为true 剩下为false
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数

        // 把最新的页码值，赋值到 q 这个查询参数对象中
        q.pagenum = obj.curr;
        // 把最新的条目数，赋值到 q 这个查询参数对象的 pagesize 属性中
        q.pagesize = obj.limit;

        // 根据最新的 q 获取对应的数据列表，并渲染表格
        // initTable();   这样写会有bug

        //首次不执行
        // if(!first){
        //   //do something
        // }

        if (!first) {
          //就是值不为true 的时候 重新渲染页面
          initTable();
        }
      },
    });
  }

  // 7.删除功能 为删除按钮绑定点击事件 事件委托
  $("body").on("click", ".btn-delete", function () {
    // 7.1获取删除按钮的个数  每一页的个数
    var len = $(".btn-delete").length;
    // console.log(len);
    // 7.2 获取到文章的 id
    var id = $(this).attr("data-id");
    // 7.3 询问是否删除
    layer.confirm("确认删除吗?", { icon: 3, title: "提示" }, function (index) {
      //do something
      // 7.4发送ajax请求
      $.ajax({
        url: "/my/article/delete/" + id,
        success: function (res) {
          if (res.status !== 0) return layer.msg(res.message);
          layer.msg("删除文章成功");

          // 7.6 修补bug
          // 当数据删除完成后，需要判断当前这一页中，是否还有剩余的数据
          // 如果没有剩余的数据了,则让页码值 -1 减 之后,
          // 再重新调用 initTable 方法
          if (len === 1) {
            q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1;
          }

          // 7.5 重新渲染页面
          initTable();
        },
      });

      layer.close(index);
    });
  });

  // 8.编辑功能
  // 给编辑注册点击事件
  $("body").on("click", ".btn-edit", function () {
    // 8.1获取ID
    var id = $(this).attr("data-id");
    // 8.2存储ID    这里是存储id 在atr.edit.js  里获取id
    localStorage.setItem("edit_id", id); //edti_id  是form表单的id
    // 8.3跳转页面
    location.href = "/article/art_edit.html"; //是原来的发布文章页面 新建一个html页面
  });
});
